<template>
	<view class="content">
		<view class="header-wrap">
			<view class="nav-wrap">
				<view class="left" style="float: left;font-size: 40rpx; width:30rpx; height:40rpx" @click="back()">
					<image src="../../static/back.png" mode=""></image>
				</view>
				<view class="types">
					运单二维码
				</view>
				<text></text>
			</view>
			
		</view>
		<view class="codeBox">
			<view class="imgBox">
				<image :src="imageSrc" alt="" class="img">
				</image>
			</view>
			<view class="num">
				扫码即可抢单：已扫 <text>{{info.qrCodeScanTime}}</text>次
			</view>
			<view class="tabUl">
				
				<view class="tabLi">
					可扫次数 
					<text v-if="!edit"  style="float: right;font-size: 30rpx;">{{qrCodeTime1}}</text>
					<view class="inputBox">
						
						<u--input
						v-if="edit"
						placeholderClass ="placeClass"
							placeholder="请输入可扫次数"
							border="surround"
							inputAlign="right"
							v-model="qrCodeTime"
							style="padding-right: 0;"
						  ></u--input>
					</view>
				</view>
				<view class="tabLi" @click="edit?show=true:''">
					有效期至
					<text :style="date == '请选择时间'?'float: right;color: rgb(192, 196, 204);padding-right: 20rpx;font-weight: 300;':'float: right'">{{date}}</text>
					<u-datetime-picker
					v-if="edit"
							:show="show"
							v-model="value1"
							mode="datetime"
							:minDate="minDate"
							@cancel="show= false"
							@confirm="selDate"
					></u-datetime-picker>
				</view>				
			</view>
		</view>
		<view class="btnBox">
			<view class="btn" v-if="!edit" @click="editInfo">
				修改
			</view>
			<view class="btn" v-if="edit" @click="save()">
				保存
			</view>
		</view>
		<text class="saveCode" @click="saveImg">保存二维码到本地</text>
	</view>
</template>

<script>
	import {
		wayBillQrCode,configureQrCode
	} from '@/config/api/app.js'
	export default{
		data(){
			return {
				value:'',
				date: '',
				info:{},
				imageSrc: '',
				edit: false,
				qrCodeTime1: '',
				qrCodeTime:'',
				imgurl:'',
				show: false,
				value1: Number(new Date()),
				waybillId:'',
				isselDate:false,
				minDate:Number(new Date())
			}
		},
		onLoad(option){
			this.getInfo(option)
			// console.log(option)
			this.waybillId = option.wayBillId
		},
		methods:{
			selDate(n){
				this.date = this.changeTimeFormat(n.value) 
				this.value1 = this.changeTimeFormat(n.value) 
				this.show = false
			},
			getInfo(data){
				wayBillQrCode(data).then(res => {
					if(res.code == 0){
						this.info = res.data
						this.imageSrc = res.data.qrCode
						this.imgurl = res.data.imgurl
						this.value = this.info.qrCodeEndtime
						// this.qrCodeTime = this.info.qrCodeTime
						this.qrCodeTime1 = this.info.qrCodeTime
						this.date = this.changeTimeFormat(this.info.qrCodeEndtime) 
					}
				})
			},
			changeTimeFormat:function(time) {
				var date = new Date(time);
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
							var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				return date.getFullYear() + "-" + month + "-" + currentDate+" "+hh + ":" + mm+ ':' + ss;
				//返回格式：yyyy-MM-dd hh:mm
			},
			editInfo(){
				this.edit=true;
				this.date='请选择时间';
				this.qrCodeTime=''
			},
			save(){
				if( !this.qrCodeTime){
					 uni.$u.toast('请填写可扫次数');
				}
				if( !this.date == '请选择时间'){
					 uni.$u.toast('请选择到期时间');
				}
				let a = {
					  waybillId: this.waybillId,
					  qrCodeTime: this.qrCodeTime  ,//可扫次数
					  qrCodeEndtime: this.date
				}
				configureQrCode(a).then(res => {
					  if(res.code == 0){
						  uni.$u.toast(res.msg);
						  this.qrCodeTime1 = this.qrCodeTime
						  // this.getInfo({wayBillId: this.waybillId})
						  this.edit = !this.edit
					  }
				})
			},
			back(){
				  // uni.navigateTo({
				  // 	url: '/pages/waybill/waybill?id=' + this.wayBillId 
				  // });
				  uni.redirectTo({
						url: '/pages/waybill/waybill?id=' + this.waybillId
				  });
				  // uni.navigateBack()
			},
			saveImg() {
				// console.log(111111111,this.imageSrc)
				uni.downloadFile({//下载
					// url: 'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', //图片下载地址
					url: this.imgurl,
					success: res => {
						console.log(res)
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({//保存图片到系统相册。
								filePath: res.tempFilePath,//图片文件路径
								success: function() {
									uni.showToast({
										title: '图片保存成功',
										icon: 'none',
									});
								},
								fail: function(e) {
									console.log(e);
									uni.showToast({
										title: '图片保存失败',
										icon: 'none',
									});
								}
							});
						}
					}
				});
			},
		
			
		}
	}
</script>

<style lang="less">
	*{
		box-sizing: border-box;
	}
	.content {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fafafa;
		padding-bottom: 200rpx;
		.header-wrap {
			position: absolute;
			z-index: 10076;
			top: 0;
			left: 0;
			width: 100vw;
			box-sizing: border-box;
			padding: 100rpx 24rpx 16rpx;
			background: #fff;
			.nav-wrap{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					image{
						width: 100%;
						height: 100%;
					}
				}
				text {
					min-width: 30rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		
		.codeBox{
			width: 640rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
			margin: 200rpx auto 40rpx;
			.imgBox{
				width: 498rpx;
				height: 498rpx;
				background: #D8D8D8;
				margin: 70rpx auto 26rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.num{
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				text-align: center;
				text{
					font-size: 44rpx;
					font-family: DINPro-Bold, DINPro;
					font-weight: bold;
					color: #00468C;
					padding: 0 8rpx;
				}
			}
		}
		.tabUl{
			margin: 96rpx auto 0;
			width: 582rpx;
			.tabLi{
				height: 96rpx;
				line-height: 96rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				width: 582rpx;
				border-bottom: 2rpx solid #F5F7FB;
				.inputBox{
					float: right;
					margin-top: 12rpx;
				}
				.placeClass{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9E9E9E;
				}
			}
			.tabLi:last-child{
				border-bottom: none;
				
			}
			
		}
		.btnBox {
			width: 100%;
			height: 182rpx;
			padding-top: 14rpx;
			.btn {
				width: 676rpx;
				height: 122rpx;
				margin: 0 auto;
				background: url('@/static/btn_bg.png') no-repeat;
				background-size: 100% 100%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 108rpx;
			}
		}
		.saveCode{
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin: 0 auto;
			border-bottom: 4rpx solid #333333;
		}
		.u-input{
			padding-right: 0!important;
			// font-size: 28rpx!important;
		}
	}
</style>